<!-- 车辆列表 -->
<template>
  <div class="dashboard-container vehicle customer-list-box">
    <div class="position">
      <el-row justify="center">
        <el-form>
          <el-col
            :span="4"
            :offset="2"
          >
            <el-form-item label="车辆类型">

              <el-select
                v-model="pageParams.truckTypeId"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in CarList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            :offset="2"
          >
            <el-form-item label="车辆号码">
              <el-input
                v-model="pageParams.licensePlate"
                clearable
                placeholder="请输入车牌号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col
            :span="4"
            :offset="2"
            style="margin-top:35px"
          >
            <el-button
              type="primary"
              class="color"
              @click="search"
            >搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-form>
      </el-row>

    </div>
    <!-- 切换不同状态 -->
    <el-menu
      active-text-color="#ffd04b"

      mode="horizontal"
      style="flex"
      fixed-left
    >
      <el-menu-item
        index="1"
        @click="all"
      >全部</el-menu-item>
      <el-menu-item
        index="2"
        @click="IsOk"
      >可用</el-menu-item>
      <el-menu-item
        index="3"
        @click="usable"
      >停用</el-menu-item>
    </el-menu>
    <!-- <el-row
      type="flex"
      justify=""
    >
      <el-col :span="4">
        <el-button
          type="primary"
          @click="all"
        >
          全部
        </el-button>
      </el-col>
      <el-col :span="4">
        <el-button
          type="primary"
          @click="IsOk"
        >
          可用</el-button>
      </el-col>
      <el-col :span="4">
        <el-button
          type="primary"
          @click="usable"
        >
          停用
        </el-button>
      </el-col>
    </el-row> -->

    <el-card>
      <el-row
        type="flex"
        justify="start"
        style="margin:10px 0"
      >
        <el-col :span="4">
          <el-button
            type="primary"
            class="color"
            @click="addCar"
          >新增车辆</el-button>
        </el-col>
      </el-row>
      <el-table
        :data="tableList|| []"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="序号"
        >
          <template v-slot="{$index}">
            {{ $index+1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="licensePlate"
          label="车牌号码"
        >
        </el-table-column>
        <el-table-column
          prop="truckTypeName"
          label="车辆类型"
        >
        </el-table-column>
        <el-table-column
          prop="driverNum"
          label="司机数量"
        >
        </el-table-column>
        <el-table-column
          prop="workStatus"
          label="车辆状态"
        >
          <template v-slot="{row}">
            <span>{{ row.workStatus===1?"启用":'停用' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="deviceGpsId"
          label="GPS设备ID"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="实载数量(T)"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="实载体积(方)"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          width="200px"
        >
          <template v-slot="{row}">
            <!-- <router-link to="/vehicle-detail/row.id"></router-link> -->
            <el-button
              type="text"
              @click="detail(row.id)"
            >查看详情</el-button>
            <el-button
              type="text"
              @click="BtnOk(row)"
            >{{ row.workStatus===1?'停用':'启用' }}</el-button>
            <el-button
              type="text"
              @click="carDriver(row)"
            >配置司机</el-button>
          </template>
        </el-table-column>

      </el-table></el-card>

    <div class="pagebox">
      <el-pagination
        :current-page="pageParams.page"
        :page-sizes="[5, 10, 20,]"
        :page-size="pageParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- 点击启用 -->
    <el-dialog
      title="车辆停用"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div class="meal"> <span>确定要停用吗? 车辆停用需满足以下条件：</span></div>
      <div class="box"> <span>1 当前车辆无运输任务</span>  <span>2 车辆无关联运输路线</span></div>
      <div class="zhushi"> <span>注：停用后司机将自动解除绑定</span></div>
      <span>
        <template>
          <el-button
            size="mini"
            @click="dialogVisible = false"
          >取 消</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="artiveq"
          >确 定</el-button>
        </template>
      </span>

    </el-dialog>
    <!-- 点击配置司机 -->
    <el-dialog
      title="车辆配置"
      :visible.sync="showDriver"
      width="30%"
    >
      <div class="meal"> <span>配置司机需要满足以下条件</span></div>
      <div class="box"> <span>1 车辆信息已完善</span>  <span>2 车辆无未完成运输任务</span></div>

      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="showDriver = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="showpreview"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增车辆 -->
    <el-dialog
      title="新增车辆"
      :visible.sync="Carshow"
      width="30%"
    >
      <el-form
        ref="AddForm"
        :rules="rules"
        :model="showCar"
      >
        <el-form-item
          label="车辆类型"
          prop="truckTypeId"
        >
          <template>
            <el-select
              v-model="showCar.truckTypeId"
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in CarList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </el-form-item>
        <el-form-item
          label="车牌号码"
          prop="licensePlate"
        >
          <el-input
            v-model="showCar.licensePlate"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="GPS设备ID"
          prop="deviceGpsId"
        >
          <el-input
            v-model="showCar.deviceGpsId"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="quxiao"
        >取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="addcarlist"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击配置司机后的确认按钮弹窗 -->
    <el-dialog
      title="配置司机"
      :visible.sync="driverisOk"
      width="60%"
    >
      <el-row
        type="flex"
        justify="sapce-around"
        style="margin:10px 0"
      >
        <el-col :span="12">
          车牌号： <span>{{ dirvermessage.licensePlate }}</span>
        </el-col>
        <el-col :span="12">
          车型： <span>{{ dirvermessage.truckTypeName }}</span>
        </el-col>
      </el-row>
      <el-row
        type="flex"
        justify="sapce-between"
        style="margin:10px 0"
      >
        <el-col :span="12">
          车辆状态： <span>{{ dirvermessage.workStatus===1?"启用":"未启用" }}</span>
        </el-col>
        <el-col :span="12">
          实载重量： <span>{{ dirvermessage.allowableVolume }}</span>
        </el-col>
      </el-row>
      <el-row style="margin:10px 0">
        <el-col :span="8">
          实载体积:<span>{{ dirvermessage.allowableLoad }}</span>
        </el-col>
      </el-row>
      <el-row>
        <template>
          <span>配置司机</span>
          <el-select
            v-model="Configuration"
            label="配置司机"
            placeholder="请输入司机名称"
            style="width:50%"
            @change="bianhua"
          >
            <el-option
              v-for="(item,index) in pagedriver"
              :key="item.id"
              :value="index"
              :label="item.name"
            >
            </el-option>
          </el-select>

          <el-table
            :data="dd"
            style="width: 100%"
          >

            <el-table-column
              prop=""
              label="序号"
              width="180px"
            >
              <template v-slot="{$index}">
                {{ $index+1 }}
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="司机名称"
              width="180px"
            >
            </el-table-column>
            <el-table-column
              prop=""
              label="操作"
              width="180px"
            >
              <template>
                <el-button type="text">
                  编辑
                </el-button>
                <el-button type="text">
                  查看
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </template>
      </el-row>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="driverisOk = false"
        >取 消</el-button>
        <el-button
          type="primary"
          size="mini"
          @click="addBtnOK"
        >确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页器 -->

  </div>
</template>
<script>
// import vehicleDrivingLicense from './components/vehicle-driving-license'

import { getCarTypeList, truckList, truckStatusUse, getTruckListInDriver, truckTypeAdd, driverList, getDriverListByCar } from '@/api/transit'
import { getUseCarSuccess } from '@/api/transport'
// import vehicleTrains from './components/vehicle-trains.vue'
// import vehicleInfo from './components/driver-info'
export default {
  name: 'Vehicle',
  // components: {
  //   vehicleDrivingLicense,
  //   vehicleTrains,
  //   vehicleInfo
  // },
  data() {
    return {
      // 车辆类型
      CarList: [],
      // 输入框绑定的数据
      // 获取的总数

      pageParams: {
        page: 1,
        pageSize: 5,
        // 车辆类型id
        truckTypeId: '',
        // 车牌号码
        licensePlate: '',
        // 车辆状态
        workStatus: ''

      },
      total: '',
      // 配置司机绑定的配置司机
      Configuration: '',
      // 点击配置司机后的确认按钮弹窗的弹窗变量
      driverisOk: false,

      // 新增车辆弹窗表单
      showCar: {
        // 车辆类型
        truckTypeId: '',
        // 车牌号码
        licensePlate: '',
        // GPS设备id
        deviceGpsId: ''

      },
      dd: [],
      // 分页司机
      pagedriver: [],
      // 表单渲染数据
      tableList: [],
      // 启用变量
      dialogVisible: false,
      // 点击启用弹框标题
      title: '',
      // 配置司机变量
      showDriver: false,
      // 控制新增车辆弹窗变量
      Carshow: false,
      // 配置司机的信息
      dirvermessage: '',
      // 点击启用存的数据
      artive: '',
      // 点击配置司机的时候传的id
      siji: null,
      rules: {
        // 车辆类型
        truckTypeName: [
          { required: true, message: '请输入要添加的车辆名称', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            if (value) {
              callback()
            } else {
              callback(new Error('数据不能为空'))
            }
          } }
        ],
        // 车牌号码
        licensePlate: [
          { required: true, message: '请输入车牌号码', trigger: 'blur' },
          { pattern: /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/, message: '车牌号信息不正确', trigger: 'blur' }

        ],
        // GPS设备id
        deviceGpsId: [
          { required: true, message: '请输入GPS设备Id', trigger: 'blur' }
        ]
      }
    }
  },

  created() {
    // 获取车辆类型
    this.getCarList()
    // 获取表单数据
    this.truck()
  },
  methods: {
    bianhua(aa) {
      // this.pagedriver = aa
      const bb = this.pagedriver.filter((item, index) => {
        return index === aa
      })

      this.dd = bb
    },
    // 分页器页数变化
    handleCurrentChange(newval) {
      this.pageParams.page = newval
      this.truck({ page: 1, pageSize: 5 })
    },
    // 分页器每页显示变化
    handleSizeChange(val) {
      this.pageParams.pageSize = val
      this.truck()
    },
    // 点击搜索
    async search() {
      const res = await truckList({ ...this.pageParams })

      this.tableList = res.data.items
      this.pageParams.page = 1
    },
    // 点击重置
    reset() {
      this.pageParams = {
        page: 1,
        pageSize: 5,
        truckTypeId: '',
        licensePlate: ''
      }
      this.truck()
    },
    // 点击新增取消按钮
    quxiao() {
      this.Carshow = false
      this.$refs.AddForm.resetFields()
    },
    // 点击全部按钮
    all() {
      this.truck()
    },
    // 点击停用按钮
    async  usable() {
      const res = await getTruckListInDriver({ ...this.pageParams })
      this.tableList = res.data
    },
    // 点击可用按钮
    async IsOk() {
      const res = await getUseCarSuccess({ ...this.pageParams })
      this.tableList = res.data.items
    },
    // 获取车辆类型
    async getCarList() {
      const { data } = await getCarTypeList()
      this.CarList = data
      console.log(data)
    },
    // 获取表单数据
    async truck () {
      const res = await truckList({ ...this.pageParams })
      this.tableList = res.data.items
      console.log(res, 'res')
      this.total = res.data.counts
    },
    // 点击启用
    BtnOk(row) {
      this.artive = row
      this.dialogVisible = true
      if (row.status === 1) {
        this.title = '车辆停用'
      }
    },

    // 点击配置司机
    async carDriver(row) {
      this.showDriver = true
      this.siji = row.id
      this.dirvermessage = row

      // 获取分页司机

      const dd = await getDriverListByCar(row.truckTypeId)
      console.log(dd, '789')
      const res = await driverList({ page: 1, pageSize: 10, truckTypeId: row.truckTypeId
      })
      this.pagedriver = res.data.items
    },
    // 新增车辆弹窗
    async   addCar() {
      this.Carshow = true
    },
    // 点击新增按钮确认弹窗
    addcarlist() {
      console.log(111)
      this.$refs.AddForm.validate(async isok => {
        if (isok) {
          await truckTypeAdd(this.showCar)
          this.$message.success('添加成功')
          this.Carshow = false
          this.$refs.AddForm.resetFields()
          this.truck()
        }
      })
    },
    // 点击配置车辆按钮弹窗的按钮
    showpreview() {
      this.showDriver = false
      this.driverisOk = true
    },

    addBtnOK() {
      this.driverisOk = false
    },
    // 点击启用弹窗确认按钮
    // 还没有写完  报错  驾驶证不存在
    async  artiveq() {
      if (this.artive.status === 1) {
        await truckStatusUse(this.artive.id)
        this.$message.success('启用成功')
        this.dialogVisible = false
      }
    },
    // 查看详情
    detail(id) {
      console.log(id, '111')
      this.$router.push({
        path: `/transit/vehicle-detail/${id}`,
        query: {
          id: id,
          formUrIName: '车辆管理'
        }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
}
.vehicle /deep/ .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}

.vehicle {
  /deep/ .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
    // margin-top: 500px;
  }
  /deep/ .el-dialog__body {
    text-align: center;
    // padding: 20px 20px 0px 20px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
  .box{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
}
.pagebox{
  width: 100%;
  height: 100px;
}
.color{
  background:#e15536
}
.meal{
  display: flex;
  justify-content: start;
}
.zhushi{
  color: orange;
   display: flex;
  justify-content: start;
}
}

// 下拉框
/deep/ .el-select {
  width: 100%;
}
.position {
  width: 100%;
  height: 100px;
  position: relative;
}
</style>

<style>
.startconfirm {
  width: 481px;
}
.startconfirm .el-message-box__header {
  padding-bottom: 4px;
}
.startconfirm .el-message-box__container {
  margin-bottom: 15px;
}
.confirm .el-message-box__status.el-icon-warning {
  left: 70px;
}
.confirm.el-message-box__title {
  font-size: 16px;
}
.confirm .el-message-box__message p {
  color: #f92d2d;
  margin-top: 5px;
}
.confirm .el-message-box__btns {
  text-align: center;
  margin-top: 10px;
}
</style>
